<template>
    <div class="box">
        <h2>Son2 子组件</h2>
        从vuex中获取的值:<label>{{ $store.state.count }}</label>
        <br />
        <button @click="subCount(1)">值 - 1</button>
        <button @click="subCount(5)">值 - 5</button>
        <button @click="subCount(10)">值 - 10</button>
        <button @click="awaitToAdd(888)">一秒后修改为888</button>
        <button @click="changeTitle('前端666')">改标题</button>
        <hr />
        <div>{{ $store.getters.filterList }}</div>
        <div>{{ filterList }}</div>
        <br />
        <hr />
        <h3>通过mapState的方式 访问模块中的state</h3>
        <div>{{ user.username }}</div>
        <div>{{ user.age }}</div>
        <div>{{ user.hobby }}</div>
        <hr />
        <div>{{ username }}</div>
        <div>{{ hobby }}</div>
        <br />
        <hr />
        <h3>通过mapGetters的方式 访问模块中的getter</h3>
        <hr />
        <div>{{ upperCaseName }}</div>
        <!-- 修改用户名 -->
        <!-- mutation 修改用户名 -->
        <button @click="updateUser('周杰伦')">修改用户名</button>

        <!-- actions 一秒之后，修改settings，theme主题 -->
        <button @click="updateTheme('orange')">一秒后修改Theme</button>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
    name: 'Son2Com',
    created() {
        console.log(mapMutations(['subCount', 'changeTitle']))
    },
    computed: {
        // 1. 默认根级别的映射  ...mapState(['模块名'])
        ...mapState(['user']),
        // 2. 子模块的映射
        ...mapState('user', ['username', 'age', 'hobby']),

        // getters
        // 1. 默认根级别的getters，找的是index.js中getters
        ...mapGetters(['filterList']),
        // 2. 子模块的映射，mapGetters('模块名', ['xxx'])
        ...mapGetters('user', ['upperCaseName'])
    },
    methods: {
        ...mapMutations(['subCount', 'changeTitle']),
        ...mapMutations('user', ['updateUser']),
        ...mapActions(['awaitToAdd']),
        ...mapActions('settings', ['updateTheme']),
        // subCount(n){
        //     this.$store.commit('subCount', n)
        // },
        // changeTitle(title){
        //     this.$store.commit('changeTitle', title)
        // },
        // 可以直接在模板上调用方法
        handleSub(n) {
            // this.$store.commit('subCount', n)
            this.subCount(n)
        },
        // 也可以直接在模板上使用
        handleWait() {
            this.awaitToAdd(888)
        }
    }
}
</script>

<style lang="css" scoped>
.box {
    border: 3px solid #ccc;
    width: 400px;
    padding: 10px;
    margin: 20px;
}
h2 {
    margin-top: 10px;
}
</style>
